<template>
    <div>
        <div class="tree-bar aside white-block tree1">
            <scroll-bar ref="treeBar" class="treeBar" :wrapStyle.sync="sidebarStyle">
                <el-tree :data="data1" :props="defaultProps" :load="loadNode" :lazy="true" @node-click="checkChange"
                         @node-expand="checkChange1($event,'treeBar')" @node-collapse="checkChange1($event,'treeBar')"
                         :current-node-key="1"
                         :expand-on-click-node="false"
                         :highlight-current="true" :default-expanded-keys="[1]" node-key="id" ref="tree">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                        <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                        <span class="el-tree-node__label">{{ data.name }}</span>
                        <span
                            class="el-tree-node__label">{{ data.haschildren == 0 ? '' : ' (' + data.count + ') ' }}</span>
                    </span>
                </el-tree>
            </scroll-bar>
        </div>
        <div class="main">
            <div class="content-top white-block" v-if="proFlag">
                <breadcrumb :title="'目录管理'">
                    <div class="text-right">
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="visible=true">新增子目录
                        </el-link>
                        <el-link type="primary limit" size="medium" :underline="false" @click="DirMigration = true"
                                 v-if="directoryMigration" class="second catalogue">目录迁移
                        </el-link>
                        <el-link type="primary limit" size="medium" class="catalogue" :underline="false"
                                 @click="delTree"
                                 v-if="directoryDeletion">目录删除
                        </el-link>
                    </div>
                </breadcrumb>
                <div class="toolbar">
                    <div class="current">
                        <span>当前目录名：</span>
                        <el-input v-model="currentTreeInput" v-if="inputBox"></el-input>
                        <el-input v-model="currentTreeInput" :disabled="true" v-if="disinputBox"></el-input>
                        <el-button type="primary limit" size="medium" @click="update" v-if="conUpdate">编辑</el-button>
                    </div>
                </div>
            </div>
            <div class="message  white-block mt10" v-if="proFlag">
                <breadcrumb :title="'接口服务列表'"></breadcrumb>
                <div class="toolbar">
                    <div class="provider">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="input" placeholder="请输入" class="input"
                                  @keyup.enter="systemSer(1)"></el-input>
                        <el-button type="primary" @click="systemSer(1)">查询</el-button>
                    </div>
                    <div class="text-right">
                        <!--                <el-button type="primary" >节点迁移</el-button>-->
                        <el-button type="primary" @click="newSys=true">新建</el-button>
                    </div>
                </div>

                <div class="table atomicTable mt20">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   @row-click="handleClick1"
                                   v-loading="loading"
                                   :highLight="true"
                                   @tabCurrentChange="tabCurrentChangeDetails"
                                   class="mt20">
                        <template slot="status" slot-scope="scope">
                            <span v-if="scope.row.status == 1">在用</span>
                            <span v-if="scope.row.status == 0">不在用</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <!--                            <el-link type="primary" :underline="false" class="mr10" @click="del">删除</el-link>-->
                            <!--                            <el-link type="primary" :underline="false" class="mr10" @click="details">详情</el-link>-->
                            <el-link type="primary" :underline="false" class="mr10"
                                     @click.stop
                                     @click="migration(scope.row.treeId)">迁移
                            </el-link>

                        </template>
                    </table-example>
                    <page :data="page" v-if="page" class="mt30 page" @jumpPage="systemSer"></page>
                </div>

            </div>
            <div class="content-l-t  white-block" v-if="flag">
                <breadcrumb :title="'系统信息'">
                    <el-button type="" @click="del">删除</el-button>
                    <el-button type="primary" @click="detailsFlagToUp">编辑</el-button>
                </breadcrumb>
                <div class="sysDet">
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统名称：</span>
                                <div class="sysContenrt">{{this.sysForm.systemName}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统编码：</span>
                                <div class="sysContenrt">{{this.sysForm.systemCode}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">管理部门：</span>
                                <div class="sysContenrt">{{this.sysForm.manageName}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">系统联系人：</span>
                                <div class="sysContenrt">{{this.sysForm.pname}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="space-between">
                        <el-col :span="12" class="sysMsg">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle">联系方式：</span>
                                <div class="sysContenrt">{{this.sysForm.pphone}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" style="margin-left: .5rem">
                            <div class="grid-content bg-purple">
                                <span class="sysTitle"></span>
                                <span class="sysContenrt"></span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="group">
                    <div class="current provider mapOutMsg">
                        <div class="text-right">
                            <!--                            <span>群组信息</span>-->
                            <breadcrumb :title="'群组信息'" class="breadcrumb1">
                                <el-link type="primary" :underline="false" @click="newGroupFlag=true">新建</el-link>
                            </breadcrumb>
                            <el-input placeholder="请输入群组名称" v-model="inputGroup" class="search"
                                      @keyup.enter="pageGetMsg(1)">
                                <i slot="suffix" class="el-input__icon el-icon-search" @click="pageGetMsg(1)"></i>
                            </el-input>
                        </div>
                    </div>
                    <div class="table atomicTable mt20">
                        <table-example :data="GroupMsgTableData" :tableColumn="header1" :slotColumns="slotColumns2"
                                       :fit="false" ref="GroupMsgTable"
                                       @row-click="handleClick"
                                       :highLight="true"
                                       v-loading="loading"
                                       @tabCurrentChange="tabCurrentChangeModify"
                                       class="mt20">
                            <template slot="operation" slot-scope="scope">
                                <el-link type="primary" :underline="false" class="mr10" @click="delIpMsg">删除</el-link>
                                <el-link type="primary" :underline="false" class="mr10" @click="updateIpMsg(scope.row)">编辑
                                </el-link>

                            </template>
                        </table-example>
                        <page :data="GroupMsgpage" v-if="GroupMsgpage" class="mt20 page" @jumpPage="pageGetMsg"></page>
                    </div>
                </div>
                <div class="municipal">
                    <div class="current provider mapOutMsg inputSearch">
                        <div class="text-right">
                            <!--                            <span>“{{title}}”群组的IP信息</span>-->
                            <breadcrumb :title="'“'+title+'”'+'群组的IP信息'" class="breadcrumb1">
                                <el-link type="primary" :underline="false" @click="newGroupIpFlag = true" v-if="add">
                                    新建
                                </el-link>
                            </breadcrumb>
                            <el-input placeholder="请输入IP地址" v-model="inputGroupIp" class="search"
                                      @keyup.enter="pageGetIp(1)">
                                <i slot="suffix" class="el-input__icon el-icon-search" @click="pageGetIp(1)"></i>
                            </el-input>
                        </div>
                    </div>
                    <div class="table ipTable mt20">
                        <table-example :data="GroupIptableData" :tableColumn="header2" :slotColumns="slotColumns2"
                                       :fit="false"
                                       v-loading="loading"
                                       :highLight="tableColor"
                                       @tabCurrentChange="tabCurrentChangeQuery"
                                       class="mt20">
                            <template slot="operation" slot-scope="scope">
                                <el-link type="primary" :underline="false" class="mr10" @click="delIpMsg1(scope.row.id)">删除</el-link>
                                <el-link type="primary" :underline="false" class="mr10" @click="updateIpMsg2(scope.row)">编辑
                                </el-link>

                            </template>
                        </table-example>
                        <page :data="GroupIppage" v-if="GroupIppage" class="mt20 page" @jumpPage="pageGetIp"></page>
                    </div>
                </div>
            </div>
        </div>

        <!--  新增子目录弹框-->
        <dialog-msk :show.sync="visible" ref="dialog" :center="true" @save="addTree"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="close">
                <span slot="title" class="dialog-title">
                    <span slot="title">
                    新增子目录
                    </span>
                </span>
            <div>
                <el-form ref="form" :model="ruleForm" :rules="rules" label-width="110px">
                    <el-form-item label="新增子目录" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!-- 详情弹框-->
        <dialog-msk :show.sync="detailsFlag" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑'"
                    :noEsc="false"
                    :noModal="false"
                    @save="saveDetails"
                    @cancel="closeDetails">
            <div>
                <el-form ref="sysFormUp" :model="sysFormUp" :rules="sysMsgRules" :label-width="'1.3rem'">
                    <el-form-item label="系统名称" prop="systemName">
                        <el-input v-model="sysFormUp.systemName"></el-input>
                    </el-form-item>
                    <el-form-item label="系统编码">
                        <el-input v-model="sysFormUp.systemCode" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="管理部门" prop="manageName">
                        <el-input v-model="sysFormUp.manageName"></el-input>
                    </el-form-item>
                    <el-form-item label="系统联系人" prop="pname">
                        <el-input v-model="sysFormUp.pname"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="pphone">
                        <el-input v-model="sysFormUp.pphone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>

        <!--  新建系统弹框-->
        <dialog-msk :show.sync="newSys" ref="dialog1" :center="true" :width="'7rem'" :title="'新建系统'" @save="addSystem"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="newSysClose">
            <div>
                <el-form ref="form" :model="form" :rules="addsysRules" :label-width="'1.3rem'">
                    <el-form-item label="系统名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="系统编码" prop="code">
                        <el-input v-model="form.code" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="管理部门" prop="manageName">
                        <el-input v-model="form.manageName" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系人" prop="people">
                        <el-input v-model="form.people" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--  新建群组信息-->
        <dialog-msk :show.sync="newGroupFlag" ref="dialog" :center="true" :width="'7rem'" :title="'新建群组信息'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addGroup"
                    @cancel="newGroupClose">
            <div>
                <el-form ref="newGroupMsg" :model="newGroupMsg" :rules="addRules" label-width="110px">
                    <el-form-item label="群组名称" prop="name">
                        <el-input v-model="newGroupMsg.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="群组编码" prop="code">
                        <el-input v-model="newGroupMsg.code" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="应用负责人" prop="people">
                        <el-input v-model="newGroupMsg.people" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--  修改群组信息-->
        <dialog-msk :show.sync="updateIpMsg1" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑群组信息'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addIpMsg"
                    @cancel="updateIpMsg1Close">
            <div>
                <el-form ref="updateIpMsgForm" :model="updateIpMsgForm" :rules="updateMsgRules" label-width="110px">

                    <el-form-item label="群组名称" prop="groupname">
                        <el-input v-model="updateIpMsgForm.groupname" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="群组编码" prop="groupcode">
                        <el-input v-model="updateIpMsgForm.groupcode" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="群组负责人" prop="appowner">
                        <el-input v-model="updateIpMsgForm.appowner" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>
        <!--  新建群组ip信息-->
        <dialog-msk :show.sync="newGroupIpFlag" ref="dialog1" :center="true" :width="'7rem'" :title="'新建群组IP信息'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addGroupIp"
                    @cancel="addClose">
            <div>
                <el-form ref="newGroupIp" :model="newGroupIp" :rules="addIpRules" label-width="110px">
                    <el-form-item label="系统IP" prop="ip">
                        <el-input v-model="newGroupIp.ip" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="端口" prop="port">
                        <el-input v-model="newGroupIp.port" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>

        <!--   修改群组ip信息-->
        <dialog-msk :show.sync="updateIpMsgform" ref="dialog1" :center="true" :width="'7rem'" :title="'编辑群组IP信息'"
                    :noEsc="false"
                    :noModal="false"
                    @save="addIpMsg2"
                    @cancel="updateIpMsgClose">
            <div>
                <el-form ref="updateIpMsgform1" :model="updateIpMsgform1" :rules="updateRules" label-width="110px">
                    <el-form-item label="系统IP" prop="ip">
                        <el-input v-model="updateIpMsgform1.ip" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="端口" prop="port">
                        <el-input v-model="updateIpMsgform1.port" placeholder="请输入"></el-input>
                    </el-form-item>

                </el-form>
            </div>
        </dialog-msk>
        <!--  节点迁移弹框-->
        <dialog-msk :show.sync="nodeMigration" ref="dialog" :center="true" :title="'节点迁移'" @save="save"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="close">
            <div>
                <div class="tree treeBar">
                    <el-tree :data="nodeData" :props="defaultProps" :load="loadNode1" :lazy="true"
                             @node-click="checkChange2"
                             @node-expand="checkChange1" @node-collapse="checkChange1" :default-expanded-keys="[1]"
                             :highlight-current="true" node-key="id" ref="tree1">
                         <span class="custom-tree-node" slot-scope="{ node, data }">
                            <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                            <i class="iconfont icon-fuwu small mr10 sys" v-if="data.haschildren == 0"></i>
                            <span class="el-tree-node__label">{{ data.name }}</span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </dialog-msk>

        <!--  目录迁移-->
        <dialog-msk :show.sync="DirMigration" ref="dialog" :center="true" :title="'目录'" @save="save1"
                    :noEsc="false"
                    :noModal="false"
                    @cancel="close">
            <div>
                <div class="tree treeBar">
                    <el-tree :data="directoryData" :props="defaultProps" :load="loadNode2" :lazy="true"
                             @node-click="checkChange2"
                             @node-expand="checkChange1" @node-collapse="checkChange1" :default-expanded-keys="[1]"
                             :highlight-current="true" node-key="id" ref="tree2">
                         <span class="custom-tree-node" slot-scope="{ node, data }">
                            <i class="iconfont icon-wenjianjia small mr10 file" v-if="data.haschildren == 1"></i>
                            <i class="iconfont icon-xitong1 small mr10 sys" v-if="data.haschildren == 0"></i>
                            <span class="el-tree-node__label">{{ data.name }}</span>
                         </span>
                    </el-tree>
                </div>
            </div>
        </dialog-msk>

    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import scrollBar from '@/components/scrollbar'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            let patter = /((1[0-9][0-9]\.)|(2[0-4][0-9]\.)|(25[0-5]\.)|([1-9][0-9]\.)|([0-9]\.)){3}((1[0-9][0-9])|(2[0-4][0-9])|(25[0-5])|([1-9][0-9])|([0-9]))/,
                ip = (rule, value, callback) => {
                    if (!patter.test(value)) {
                        return callback(new Error('请输入合法的ip'))
                    } else {
                        callback()
                    }
                },
                patterNum = /^[0-9]*$/,
                num = (rule, value, callback) => {
                    if (!patterNum.test(value)) {
                        return callback(new Error('请输入合法的端口'))
                    } else {
                        callback()
                    }
                },
                num1 = /^[0-9-]*$/,
                number1 = (rule, value, callback) => {
                    if (value && !num1.test(value)) {
                        return callback(new Error('只能出现数字或者"-"'))
                    } else {
                        callback()
                    }
                },
                sysCode = /^[0-9a-zA-Z.]+$/,
                code = (rule, value, callback) => {
                    if (value && !sysCode.test(value)) {
                        return callback(new Error('只能出现"."或者数字或者字母'))
                    } else {
                        callback()
                    }
                }
            return {
                sidebarStyle: null,
                input: '',
                loading: false,
                inputGroup: '',
                inputGroupIp: '',
                currentPage: 1,
                sysForm: {}, // 系统信息
                sysFormUp: {},
                form: {
                    systemId: '',
                    name: '', // 系统名称
                    code: '', // 服务编码
                    people: '', // 系统联系人
                    phone: '', // 联系方式
                    manageName: '', // 管理部门
                    status: '' // 状态
                }, // 新建系统
                newGroupMsg: {
                    code: '',
                    name: '',
                    people: ''
                }, // 新建群组信息
                newGroupIp: {
                    ip: '',
                    port: ''
                }, // 新建群组ip信息
                updateIpMsgForm: {},
                updateIpMsgform1: {},
                tableData: [],
                GroupMsgTableData: [], // 群组信息表格
                GroupIptableData: [], // 群组ip信息表格
                header: [
                    {
                        prop: 'systemName',
                        label: '系统名称',
                        minWidth: 150,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'systemCode',
                        label: '系统编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'manageName',
                        label: '管理部门',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pname',
                        label: '联系人',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'pphone',
                        label: '联系方式',
                        minWidth: 90,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: 60,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ],
                header1: [
                    {
                        prop: 'groupname',
                        label: '群组名称',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'groupcode',
                        label: '群组编码',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'appowner',
                        label: '应用负责人',
                        minWidth: 60,
                        align: 'left',
                        headerAlign: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center'
                    }
                ], // 群组信息表头
                header2: [
                    {
                        prop: 'ip',
                        label: '系统IP',
                        minWidth: 100,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'port',
                        label: '端口',
                        minWidth: 80,
                        align: 'left',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center',
                        fixed: 'right'
                    }
                ], // 群组ip信息表头
                slotColumns: ['operation', 'status'],
                slotColumns1: ['operation'],
                slotColumns2: ['operation'],
                page: null, // 分页
                GroupMsgpage: null, // 群组信息分页
                GroupIppage: null, // 群组ip分页
                data1: null, // 左边树
                directoryData: null, // 迁移目录
                nodeData: null, // 迁移节点
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: function (data, node) {
                        if (!data.haschildren) return true
                    }
                },
                highlightCurrent: false,
                defaultExpandAll: false,
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ]
                },
                sysMsgRules: {
                    systemName: [
                        {required: true, message: '服务名称不能为空', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    pname: [
                        {required: false, message: '联系人不能为空', trigger: 'blur'},
                        {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
                    ],
                    pphone: [
                        {required: false, validator: number1, trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'}
                        // {validator: number1}
                    ],
                    manageName: [
                        {required: true, message: '管理部门不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ]
                },
                ruleForm: {
                    name: '',
                    type: 0
                },
                addIpRules: {
                    ip: [
                        {required: true, message: '请输入ip', trigger: 'blur'},
                        {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'},
                        {validator: ip}
                    ],
                    port: [
                        {required: true, message: '请输入端口', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: num}
                    ]
                },
                addRules: {
                    code: [
                        {required: false, validator: code, trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: code}
                    ],
                    name: [
                        {required: true, message: '请输入群组名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    people: [
                        {required: true, message: '请输入应用负责人', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ]
                }, // 新建群组
                updateRules: {
                    ip: [
                        {required: true, message: 'ip不能为空', trigger: 'blur'},
                        {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'},
                        {validator: ip}
                    ],
                    port: [
                        {required: true, message: '端口不能为空', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: num}
                    ]

                }, // 修改群组ip
                updateMsgRules: {
                    groupcode: [
                        {validator: code}
                    ],
                    groupname: [
                        {required: true, message: '请输入群组名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    appowner: [
                        {required: true, message: '请输入应用负责人', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ]
                }, // 修改群组
                addsysRules: {
                    name: [
                        {required: true, message: '请输入系统名称', trigger: 'blur'},
                        {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入系统编码', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'},
                        {validator: code}
                    ],
                    people: [
                        {required: false, message: '请输入系统联系人', trigger: 'blur'},
                        {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: false, message: '请输入联系方式', trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur'},
                        {validator: number1}
                    ],
                    manageName: [
                        {required: true, message: '请输入管理部门', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ]
                }, // 新建系统
                newSys: false,
                visible: false,
                nodeMigration: false,
                DirMigration: false,
                newGroupFlag: false,
                newGroupIpFlag: false,
                updateIpMsg1: false,
                updateIpMsgform: false,
                flag: false, // 系统信息
                proFlag: true, // 表格
                currentTree: null,
                directoryCurrentTree: null,
                options: [
                    {
                        value: '1',
                        label: '系统名称'
                    }, {
                        value: '2',
                        label: '系统编号'
                    }
                ],
                value: '1',
                id: null,
                index: 1, // 分页数据
                GroupIpPaging: 1, // 群组分页
                GroupMsgPaging: 1, // 群组信息分页
                groupid: null,
                rowId: null,
                rowSystemId: null,
                detailsId: null,
                directoryDeletion: false,
                conUpdate: false,
                directoryMigration: false,
                node_had: null,
                resolve_had: null,
                add: false,
                title: '',
                currentRowDetails: null,
                currentRowModify: null,
                currentRowQuery: null,
                addIp: '',
                tableColor: true,
                currentTreeInput: '',
                code: '',
                groupCode: '',
                detailsFlag: false,
                inputBox: false,
                disinputBox: true,
                inputbox: '',
                updateGroupid: '',
                groupId: '',
                ipId: ''
            }
        },
        created() {
            // let lett = this
            // document.onkeydown = function (e) {
            //     console.info(e)
            //     let key = window.event.keyCode
            //     if (key === 13) {
            //         lett.systemSer(1)
            //         lett.pageGetMsg(1)
            //         lett.pageGetIp(1)
            //     }
            // }
        },
        mounted() {
            let _this = this
            // 左侧树滚动条样式初始赋值
            this.sidebarStyle = this.$method.getScrollbarStyle()
            // 添加左侧树滚动条对象
            this.$method.addScrollbar(_this)
            this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                id: 1,
                current: this.index || 1,
                size: 10
            }).then(result => {
                if (result.success) {
                    this.tableData = result.data.records
                    this.page = result.data
                    delete this.page['records']
                }
            })
        },
        methods: {

            detailsFlagToUp() {
                this.detailsFlag = true
                this.sysFormUp = {...this.sysForm}
            },

            // 目录树
            loadNode(node, resolve) {
                this.node_had = node
                this.resolve_had = resolve
                this.$http.get('/EsbConsumerTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0
                }).then(result => {
                    // this.data = result.data
                    // if(this.result.data.haschildren)
                    let _this = this, arr = [], catalogueData = [], nodesData = []
                    setTimeout(() => {
                        _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                    }, 500)
                    for (let i = 0; i < result.data.length; i++) {
                        if (result.data[i].parId === 0) {
                            this.currentTreeInput = result.data[0].name
                        }
                        if (result.data[i].haschildren === 1) {
                            catalogueData.push(result.data[i])
                        } else {
                            nodesData.push(result.data[i])
                        }
                    }
                    arr = [...nodesData, ...catalogueData]
                    return resolve(arr)
                })
            },

            // 节点迁移树
            loadNode1(node, resolve) {
                // this.node_had = node
                // this.resolve_had = resolve
                this.$http.get('/EsbConsumerTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)

                })
            },

            // 目录迁移树
            loadNode2(node, resolve) {
                // this.node_had = node
                // this.resolve_had = resolve
                this.$http.get('/EsbConsumerTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0,
                    haschildren: 1
                }).then(result => {
                    this.data = result.data
                    return resolve(result.data)

                })
            },

            // 修改当前目录名
            update() {
                this.$http.get('/EsbConsumerTree/updateName', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '',
                    id: this.currentTree ? this.currentTree.data.id : '',
                    name: this.currentTreeInput
                }).then(result => {
                    if (result.success) {
                        if (this.currentTreeInput !== this.inputbox) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.inputbox = this.currentTreeInput
                            this.loadNode(this.node_had, this.resolve_had)
                        } else {
                            this.$message({
                                type: 'info',
                                message: '目录名称未改变!'
                            })
                        }
                        // this.loadNode1(this.node_had, this.resolve_had)
                        // this.loadNode2(this.node_had, this.resolve_had)
                    }
                })
            },

            // 添加当前目录下的数据
            addTree() {
                let subdirectory = this.ruleForm.name
                this.$http.get('/EsbConsumerTree/insertSubId', {
                    haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                    lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    name: subdirectory
                }).then(result => {
                    if (result.success) {
                        this.ruleForm.type = 1
                        this.visible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.ruleForm.name = ''
                        this.refreshNodeBy(1)
                        this.loadNode(this.node_had, this.resolve_had)
                        // this.loadNode1(this.node_had, this.resolve_had)
                        // this.loadNode2(this.node_had, this.resolve_had)
                    }
                })
            },

            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },

            // 分页
            systemSer(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('EsbConsumerSystem/selectSubSystemById', {
                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                    current: this.index || 1,
                    size: 10,
                    message: this.input,
                    type: this.value
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },
            // 删除群组信息
            delIpMsg() {
                this.$confirm('确定要删除该服务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbConsumerSystemIpGroup/delete', {
                        groupid: this.rowId
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.rowId = ''
                            this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                                id: this.groupCode || this.groupId,
                                current: this.index || 1,
                                size: 5
                            }).then(result => {
                                if (result.success) {
                                    this.GroupMsgTableData = result.data.records
                                    if (this.GroupMsgTableData && this.GroupMsgTableData[0]) {
                                        this.groupid = this.GroupMsgTableData[0].groupid
                                        this.title = this.GroupMsgTableData[0].groupname
                                    }
                                    this.GroupMsgpage = result.data
                                    delete this.GroupMsgpage['records']
                                }
                                this.pageGetIp()
                            })
                        }
                    })
                })
            },

            // 删除ip
            delIpMsg1(id) {
                this.$confirm('确定要删除该服务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbConsumerSystemIp/delete', {
                        id: id
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.pageGetIp(1)
                            // this.$http.get('/EsbConsumerSystemIp/pageData', {
                            //     groupid: this.groupCode || this.groupId,
                            //     current: this.GroupIpPaging || 1,
                            //     size: 5
                            // }).then(result => {
                            //     if (result.success) {
                            //         this.GroupIptableData = result.data.records
                            //         this.GroupIppage = result.data
                            //         delete this.GroupIppage['records']
                            //     }
                            // })
                        }
                    })
                })
            },

            // 修改群组信息
            updateIpMsg(row) {
                this.updateIpMsg1 = true
                this.$http.get('/EsbConsumerSystemIpGroup/select', {
                    groupid: row.groupid
                }).then(result => {
                    if (result.success) {
                        this.updateIpMsgForm = result.data
                    }
                })
            },
            addIpMsg() {
                this.validate('updateIpMsgForm', () => {
                    this.$http.get('/EsbConsumerSystemIpGroup/update', {
                        groupname: this.updateIpMsgForm.groupname,
                        groupid: this.rowId,
                        groupcode: this.updateIpMsgForm.groupcode,
                        appowner: this.updateIpMsgForm.appowner
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                                id: this.sysForm.id,
                                current: this.index || 1,
                                size: 5
                            }).then(result => {
                                if (result.success) {
                                    this.GroupMsgTableData = result.data.records
                                    this.GroupMsgpage = result.data
                                    delete this.GroupMsgpage['records']
                                }
                            })
                            this.updateIpMsg1 = false
                        }

                    })
                })
            },

            // 修改ip
            updateIpMsg2(row) {
                this.updateIpMsgform = true
                this.$http.get('/EsbConsumerSystemIp/select', {
                    id: row.id
                }).then(result => {
                    this.updateIpMsgform1 = result.data
                })
            },
            addIpMsg2() {
                this.validate('updateIpMsgform1', () => {
                    this.$http.get('/EsbConsumerSystemIp/update', {
                        id: this.updateIpMsgform1.id,
                        ip: this.updateIpMsgform1.ip,
                        port: this.updateIpMsgform1.port
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.$http.get('/EsbConsumerSystemIp/pageData', {
                                groupid: this.rowId ? this.rowId : this.GroupMsgTableData[0].groupid,
                                current: this.GroupIpPaging || 1,
                                size: 5
                            }).then(result => {
                                if (result.success) {
                                    this.add = true
                                    this.GroupIptableData = result.data.records
                                    this.GroupIppage = result.data
                                    delete this.GroupIppage['records']
                                }
                            })
                            this.updateIpMsgform = false
                        }
                    })
                })
            },

            del() {
                if (this.detailsId === null) {
                    this.$confirm('确定要删除该服务吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.get('/EsbConsumerSystem/delete', {
                            id: this.currentTree ? this.currentTree.data.code : ''
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.flag = false
                                this.proFlag = true
                                this.currentTreeInput = ''
                                this.disinputBox = true
                                this.inputBox = false
                                this.refreshNodeBy(1)
                                this.loadNode(this.node_had, this.resolve_had)
                                this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                    current: this.index || 1,
                                    size: 10
                                }).then(result => {
                                    if (result.success) {
                                        this.tableData = result.data.records
                                        this.page = result.data
                                        delete this.page['records']
                                    }
                                })
                            }
                        })
                    })
                } else {
                    this.$confirm('确定要删除该服务吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.get('/EsbConsumerSystem/delete', {
                            id: this.detailsId
                        }).then(result => {
                            if (result.success) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.flag = false
                                this.proFlag = true
                                this.currentTreeInput = ''
                                this.disinputBox = true
                                this.inputBox = false
                                this.refreshNodeBy(1)
                                this.loadNode(this.node_had, this.resolve_had)
                                this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                                    id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                    current: this.index || 1,
                                    size: 10
                                }).then(result => {
                                    if (result.success) {
                                        this.tableData = result.data.records
                                        this.page = result.data
                                        delete this.page['records']
                                    }
                                })
                            }
                        })
                    })
                }

            },

            // 删除目录
            delTree() {
                this.$confirm('确定要删除该目录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('/EsbConsumerTree/delete', {
                        haschildren: this.currentTree ? this.currentTree.data.haschildren : '',
                        id: this.currentTree ? this.currentTree.data.id : ''
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.currentTreeInput = ''
                            this.conUpdate = false
                            this.loadNode(this.node_had, this.resolve_had)
                        }
                    })

                })
            },

            // 新建系统
            addSystem() {
                // this.form.reset();
                // debugger
                this.validate('form', () => {
                    this.$http.get('/EsbConsumerSystem/insert', {
                        haschildren: this.currentTree ? this.currentTree.data.haschildren : '' || 1,
                        id: this.currentTree ? this.currentTree.data.id : '' || 1,
                        lvl: this.currentTree ? this.currentTree.data.lvl : '' || 1,
                        systemName: this.form.name,
                        systemCode: this.form.code,
                        pPhone: this.form.phone,
                        pName: this.form.people,
                        manageName: this.form.manageName
                    }).then(result => {
                        if (result.success) {
                            this.newSys = false
                            this.form = {}
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            })
                            this.refreshNodeBy(1)
                            this.loadNode(this.node_had, this.resolve_had)
                            this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                                id: this.currentTree ? this.currentTree.data.id : '' || 1,
                                current: this.index || 1,
                                size: 10
                            }).then(result => {
                                if (result.success) {
                                    this.tableData = result.data.records
                                    this.page = result.data
                                    delete this.page['records']
                                }
                            })
                        }
                    })
                })
            },

            // 新建群组信息
            addGroup() {
                this.validate('newGroupMsg', () => {
                    this.$http.get('/EsbConsumerSystemIpGroup/insert', {
                        systemid: this.groupCode || this.groupId,
                        groupcode: this.newGroupMsg.code,
                        groupname: this.newGroupMsg.name,
                        appowner: this.newGroupMsg.people
                    }).then(result => {
                        if (result.success) {
                            this.newGroupFlag = false
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            })
                            this.rowId = ''
                            this.newGroupMsg.code = ''
                            this.newGroupMsg.name = ''
                            this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                                id: this.groupCode || this.groupId,
                                current: 1,
                                size: 5
                            }).then(result => {
                                if (result.success) {
                                    this.GroupMsgTableData = result.data.records
                                    if (this.GroupMsgTableData && this.GroupMsgTableData[0]) {
                                        this.groupid = this.GroupMsgTableData[0].groupid
                                        this.title = this.GroupMsgTableData[0].groupname
                                    }
                                    this.GroupMsgpage = result.data
                                    delete this.GroupMsgpage['records']
                                    this.pageGetIp()
                                }
                            })
                            this.updateIpMsg1 = false
                            this.add = false
                        }
                    })
                })
            },

            // 新建群组ip
            addGroupIp() {
                this.validate('newGroupIp', () => {
                    this.$http.get('/EsbConsumerSystemIp/insert', {
                        groupid: this.rowId,
                        systemid: this.rowSystemId,
                        ip: this.newGroupIp.ip,
                        port: this.newGroupIp.port
                    }).then(result => {
                        if (result.success) {
                            this.newGroupIpFlag = false
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            })
                            this.newGroupIp = {}
                            this.$http.get('/EsbConsumerSystemIp/pageData', {
                                groupid: this.rowId,
                                current: this.GroupIpPaging || 1,
                                size: 5
                            }).then(result => {
                                if (result.success) {
                                    this.add = true
                                    this.GroupIptableData = result.data.records
                                    this.GroupIppage = result.data
                                    delete this.GroupIppage['records']
                                }
                            })
                        }
                    })
                })
            },

            // 修改系统信息
            saveDetails() {
                this.validate('sysFormUp', () => {
                    this.$http.get('/EsbConsumerSystem/update', {
                        id: this.detailsId,
                        manageName: this.sysFormUp.manageName,
                        pName: this.sysFormUp.pname,
                        pPhone: this.sysFormUp.pphone,
                        systemName: this.sysFormUp.systemName
                    }).then(result => {
                        if (result.success) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.sysForm = {...this.sysFormUp}
                            this.detailsFlag = false
                            this.loadNode(this.node_had, this.resolve_had)
                        }
                    })
                })
            },

            // 节点迁移
            migration(treeId) {
                this.nodeMigration = true
                this.$nextTick(() => {
                    this.id = treeId
                })

            },
            save() {
                this.$http.get('/EsbConsumerTree/migrate', {
                    id: this.id,
                    targetId: this.directoryCurrentTree ? this.directoryCurrentTree.data.id : '',
                    targetLvl: this.directoryCurrentTree ? this.directoryCurrentTree.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.nodeMigration = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        this.refreshNodeBy(1)
                        // this.loadNode(this.node_had, this.resolve_had)
                        this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                            id: this.currentTree.data.id,
                            current: this.index || 1,
                            size: 10
                        }).then(result => {
                            if (result.success) {
                                this.tableData = result.data.records
                                this.page = result.data
                                delete this.page['records']
                            }
                        })
                    }
                })
            },

            // 目录迁移
            save1() {
                this.DirMigration = true
                this.$http.get('/EsbConsumerTree/migrate', {
                    id: this.currentTree ? this.currentTree.data.id : '',
                    targetId: this.directoryCurrentTree ? this.directoryCurrentTree.data.id : '',
                    targetLvl: this.directoryCurrentTree ? this.directoryCurrentTree.data.lvl : ''
                }).then(result => {
                    if (result.success) {
                        this.DirMigration = false
                        this.$message({
                            type: 'success',
                            message: '迁移成功!'
                        })
                        this.refreshNodeBy(1)
                        // this.loadNode(this.node_had, this.resolve_had)
                    }
                })
            },

            checkChange(data, node) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree = {
                    data,
                    node
                }
                // if (this.groupCode !== (this.currentTree.data && this.currentTree.data.code)) {
                    this.groupCode = this.currentTree.data.code
                    this.currentTreeInput = this.currentTree.data.name
                    this.inputbox = this.currentTree.data.name
                    this.inputGroup = ''
                    this.inputGroupIp = ''
                    this.index = 1
                    this.GroupMsgpage = null
                    this.GroupIppage = null
                    if (this.currentTree.node.data.id === 1) {
                        this.disinputBox = true
                        this.inputBox = false
                    } else {
                        this.inputBox = true
                        this.disinputBox = false
                    }
                    this.GroupIptableData = []
                    this.addIp = this.currentTree.data.id
                    if (this.add !== this.currentTree.data.id) {
                        this.add = false
                        this.title = ''
                        this.tableColor = false
                    }
                    if (this.currentTree.data.id === 1) {
                        this.directoryDeletion = false
                        this.conUpdate = false
                        this.directoryMigration = false
                    } else {
                        this.directoryDeletion = true
                        this.conUpdate = true
                        this.directoryMigration = true
                    }
                    this.rowId = ''
                    if (this.currentTree.data.haschildren === 0) {
                        this.detailsId = this.currentTree.data.code
                        this.proFlag = false
                        this.flag = true
                        // 系统信息展示
                        this.$http.get('/EsbConsumerSystem/select', {
                            id: this.currentTree.data.code
                        }).then(result => {
                            if (result.success) {
                                if (result.data) {
                                    this.sysForm = result.data
                                }
                            }
                        })
                        // 群组信息
                        this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                            id: this.currentTree.data.code,
                            current: this.index || 1,
                            size: 5
                        }).then(result => {
                            if (result.success) {
                                this.GroupMsgTableData = result.data.records
                                if (this.GroupMsgTableData && this.GroupMsgTableData[0]) {
                                    this.groupid = this.GroupMsgTableData[0].groupid
                                    this.title = this.GroupMsgTableData[0].groupname
                                }
                                this.GroupMsgpage = result.data
                                delete this.GroupMsgpage['records']
                                this.$nextTick(() => {
                                    if (this.$refs.GroupMsgTable) this.$refs.GroupMsgTable.$children[0].setCurrentRow()
                                })
                            }
                            this.pageGetIp()
                        })
                    } else {
                        this.proFlag = true
                        this.flag = false

                        this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                            id: this.currentTree.data.id,
                            current: this.index || 1,
                            size: 10
                        }).then(result => {
                            if (result.success) {
                                this.tableData = result.data.records
                                this.page = result.data
                                delete this.page['records']
                            }
                        })
                    }

                // }
            },

            // 查询接口服务列表数据

            // queryServiceData() {
            //     this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
            //         id: this.currentTree ? this.currentTree.data.id : '' || 1,
            //         current: this.index || 1,
            //         size: 10,
            //         message: this.input,
            //         type: this.value
            //     }).then(result => {
            //         if (result.success) {
            //             this.tableData = result.data.records
            //             this.page = result.data
            //             delete this.page['records']
            //         }
            //     })
            // },

            // // 查询群组信息数据
            // queryGroupData() {
            //     this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
            //         id: this.currentTree ? this.currentTree.data.code : '',
            //         current: this.index || 1,
            //         size: 5,
            //         message: this.inputGroup
            //     }).then(result => {
            //         if (result.success) {
            //             this.GroupMsgTableData = result.data.records
            //             this.groupid = this.GroupMsgTableData[0].groupid
            //             this.GroupMsgpage = result.data
            //             delete this.GroupMsgpage['records']
            //         }
            //     })
            // },

            // // 查询群组ip信息数据
            // queryGroupIpData() {
            //     this.$http.get('/EsbConsumerSystemIp/pageData', {
            //         groupid: this.rowId,
            //         current: this.GroupIpPaging || 1,
            //         size: 5,
            //         message: this.inputGroupIp
            //     }).then(result => {
            //         if (result.success) {
            //             this.GroupIptableData = result.data.records
            //             this.GroupIppage = result.data
            //             delete this.GroupIppage['records']
            //         }
            //     })
            // },

            // 表格数据读取
            // 群组ip
            pageGetIp(GroupIpPaging) {
                this.loading = true
                if (GroupIpPaging) this.GroupIpPaging = GroupIpPaging
                if (this.GroupMsgTableData[0]) {
                    this.$http.get('/EsbConsumerSystemIp/pageData', {
                        groupid: this.rowId ? this.rowId : this.GroupMsgTableData[0].groupid,
                        current: this.GroupIpPaging || 1,
                        size: 5,
                        message: this.inputGroupIp
                    }).then(result => {
                        if (result.success) {
                            this.GroupIptableData = result.data.records
                            this.GroupIppage = result.data
                            delete this.GroupIppage['records']
                        }
                    })
                }
                this.loading = false
            },
            // 群组信息
            pageGetMsg(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                    id: this.sysForm.id,
                    current: this.index || 1,
                    size: 5,
                    message: this.inputGroup
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.GroupMsgTableData = result.data.records
                        this.groupid = this.GroupMsgTableData[0] ? this.GroupMsgTableData[0].groupid : ''
                        this.GroupMsgpage = result.data
                        delete this.GroupMsgpage['records']
                        this.title = this.GroupMsgTableData[0] ? this.GroupMsgTableData[0].groupname : ''
                    }
                    this.rowId = ''
                    if (this.groupid) {
                        this.$http.get('/EsbConsumerSystemIp/pageData', {
                            groupid: this.groupid,
                            current: 1,
                            size: 5
                        }).then(result => {
                            if (result.success) {
                                this.GroupIptableData = result.data.records
                                this.GroupIppage = result.data
                                delete this.GroupIppage['records']
                            }
                        })
                    }
                })
            },

            // 系统
            system(GroupMsgPaging) {
                if (GroupMsgPaging) this.GroupMsgPaging = GroupMsgPaging
                this.$http.get('/EsbConsumerSystem/selectSubSystemById', {
                    id: this.currentTree.data.id,
                    current: this.GroupMsgPaging || 1,
                    size: 10
                }).then(result => {
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                })
            },

            checkChange1(data, node) {
                // this.$refs.tree.setCurrentKey(data.id)
                let _this = this
                setTimeout(() => {
                    _this.$method.updateView(false, false, _this, _this.$refs.treeBar)
                }, 500)
                this.directoryCurrentTree = {
                    data,
                    node
                }
            },

            checkChange2(data, node) {
                this.$refs.tree.setCurrentKey(data.id)
                this.directoryCurrentTree = {
                    data,
                    node
                }
            },

            refreshNodeBy(id) {
                let node = this.$refs.tree.getNode(id) // 通过节点id找到对应树节点对象
                node.loaded = false
                node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
            },

            handleClick(row) {
                // if (row.groupid !== this.rowId) {
                //     this.rowId = row.groupid
                //     this.rowSystemId = row.systemid
                //     this.title = row.groupname
                //     this.GroupIpPaging = 1
                //     this.updateGroupid = row.groupid
                //     // 群组ip信息
                //     this.addIp = this.currentTree.data.id
                //     if (this.add !== this.currentTree.data.id) {
                //         this.add = false
                //         // this.title = ''
                //     }
                // }
                this.rowId = row.groupid
                this.rowSystemId = row.systemid
                this.title = row.groupname
                this.GroupIpPaging = 1
                this.updateGroupid = row.groupid
                // 群组ip信息
                this.addIp = this.currentTree.data.id
                if (this.add !== this.currentTree.data.id) {
                    this.add = false
                    // this.title = ''
                }
                this.$http.get('/EsbConsumerSystemIp/pageData', {
                    groupid: row.groupid,
                    current: this.GroupIpPaging || 1,
                    size: 5
                }).then(result => {
                    if (result.success) {
                        this.add = true
                        this.GroupIptableData = result.data.records
                        this.GroupIppage = result.data
                        delete this.GroupIppage['records']
                    }
                })
            },
            // handClick(row) {
            //     this.$nextTick(() => {
            //         this.ipId = row.id
            //         this.rowId = row.groupid // ip列表的点击事件
            //     })
            // },
            handleClick1(row) {
                this.$nextTick(() => {
                    this.detailsId = row.id
                    this.groupId = row.id
                })
                this.proFlag = false
                this.flag = true
                this.inputGroup = ''
                this.inputGroupIp = ''
                this.GroupMsgpage = null
                this.GroupIppage = null
                this.$http.get('/EsbConsumerSystem/select', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        this.sysForm = result.data
                    }
                })

                // 群组信息
                this.$http.get('/EsbConsumerSystemIpGroup/pageData', {
                    id: row.id,
                    current: this.index || 1,
                    size: 5
                }).then(result => {
                    if (result.success) {
                        this.GroupMsgTableData = result.data.records
                        if (this.GroupMsgTableData && this.GroupMsgTableData[0]) {
                            this.groupid = this.GroupMsgTableData[0].groupid
                            this.title = this.GroupMsgTableData[0].groupname
                        }
                        this.GroupMsgpage = result.data
                        delete this.GroupMsgpage['records']
                    }
                    this.pageGetIp()
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleNodeClick(data) {
                // console.log(data)
            },

            // 关闭弹框
            close(obj) {
                this.visible = false
                this.nodeMigration = false
                this.DirMigration = false
            },
            closeDetails() {
                this.detailsFlag = false
            },
            newSysClose() {
                this.newSys = false
                this.$refs.form.resetFields()
            },
            addClose() {
                this.newGroupIpFlag = false
                this.$refs.newGroupIp.resetFields()
            },
            newGroupClose() {
                this.newGroupFlag = false
                this.$refs.newGroupMsg.resetFields()
            },
            updateIpMsgClose() {
                this.updateIpMsgform = false
                this.$refs.updateIpMsgform1.resetFields()
            },
            updateIpMsg1Close() {
                this.updateIpMsg1 = false
                this.$refs.updateIpMsgForm.resetFields()
            },
            tabCurrentChangeDetails(currentRowDetails, oldCurrentRowDetails) {
                this.currentRowDetails = currentRowDetails
            },
            tabCurrentChangeModify(currentRowModify, oldCurrentRowModify) {
                this.currentRowModify = currentRowModify
            },
            tabCurrentChangeQuery(currentRowQuery, oldCurrentRowQuery) {
                this.currentRowQuery = currentRowQuery
            }
        },
        components: {
            dialogMsk,
            tableExample,
            page,
            breadcrumb,
            scrollBar
        }
    }
</script>
<style scoped lang="less">
    .message {
        min-height: calc(100% - 1.6rem);
    }

    .content-l-t {
        min-height: 100%;
    }

    .ipTable {
        margin-bottom: .17rem;
    }

    .serviceContent {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        cursor: pointer;
        display: inline-block;
        width: 3rem;
    }

    .breadcrumb1 {
        height: 0.15rem;
        padding-left: 0.1rem;
        border-left: 2px solid #5586FB;
        text-align: left;
    }

    .sysDet {
        margin-top: .4rem;
    }

    .el-button--default {
        border-color: #EFEFEF;
        background-color: transparent;
        outline: none;
        color: #5586FB;
        font-size: .18rem;

        /*&:hover, &:focus, &:active {*/
        /*    outline: none;*/
        /*    background-color: transparent;*/
        /*    border-color: transparent;*/
        /*}*/
    }

    .el-link {
        font-size: .14rem;
        z-index: 1;
    }

    .catalogue {
        font-size: .16rem;
    }

    .second {
        margin: 0 0.1rem;
        /* position: relative; */
        border-left: 0.01rem solid #ccc;
        border-right: 0.01rem solid #ccc;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        height: 0.15rem;
        line-height: 0.15rem;
    }

    .tree {
        height: 2.5rem;
        overflow-y: auto;
    }

    .tree1 {
        padding: .2rem;
    }

    .file {
        color: #FFCA28;
    }

    .sys {
        color: #5586FB;
    }

    .current {
        span {
            float: left;
            line-height: .4rem;
        }

        .el-input {
            width: 3rem;
            font-size: .16rem;
            color: #5586FB;
        }

        /*.el-button {*/
        /*    margin-left: .3rem;*/
        /*}*/
    }

    .el-button--primary {
        background-color: #5586FB;
    }

    .content-l-t {
        .mapOutMsg {
            font-size: .16rem;
            margin-top: .2rem;
            margin-bottom: .3rem;
            position: relative;

            .el-input {
                font-size: .16rem;
                color: #5586FB;
            }

            /*.el-button {*/
            /*    padding-left: 0;*/
            /*    margin-left: 0;*/
            /*}*/

            .search {
                position: absolute;
                top: -.12rem;
                right: 0.8rem;
            }

            span {
                float: left;
                margin-left: .2rem;
                position: relative;
            }

            span::before {
                content: "";
                position: absolute;
                left: -0.1rem;
                top: .12rem;
                width: 0.02rem;
                height: 0.15rem;
                background-color: #5586FB;
            }

            .el-link {
                font-size: .16rem;
            }
        }

        .inputSearch {
            margin-top: .5rem;
            margin-bottom: .3rem;
        }

        .sysMsg {
            min-height: .4rem;
            border-bottom: .01rem solid #E1E1E1;
            margin-bottom: .3rem;
            margin-right: .5rem;
            font-size: .16rem;

            .sysTitle {
                display: inline-block;
                float: left;
                color: #999;
                margin-right: .2rem;
                /*width: 1rem;*/
                vertical-align: top;
            }

            .sysContenrt {
                width: 3rem;
                overflow-wrap: break-word;
                display: inline-block;
                vertical-align: text-top;
            }
        }

        h3 {
            margin-bottom: .3rem;
        }

        ul {
            li {
                float: left;
                width: 40%;
                margin-right: .5rem;
                margin-top: .2rem;

                .el-input {
                    min-width: 2rem;
                }
            }

            .right {
                text-align: right;
            }
        }

        .el-form-item {
            margin-left: 20%;
            width: 50%;

            .btn-save {
                margin-top: .3rem;
            }
        }

        .el-select {
            width: 100%;
        }
    }

    .message {

        .group,
        .municipal {
            width: 49.5%;
            border-radius: 5px;
            padding: .3rem;

            .group-l {
                float: left;
                width: 70%;

                .el-input {
                    width: 50%;
                    min-width: 1.5rem;
                }

                .el-button {
                    margin-left: .2rem;
                }
            }

            .group-r {
                float: right;
            }

            .table {
                width: 100%;
            }

            .page {
                float: right;
                margin-top: .3rem;
            }

        }

        .group {
            float: left;
        }

        .municipal {
            float: right;
        }
    }

    .toolbar {
        font-size: 0.16rem;

        .current {
            > span {
                color: #999;
            }
        }
    }
</style>
